<title>System Resources</title>

<% @resources_report.data.keys.each do |server_key| %>
  <h1 class="title mt-8 pt-8"><%= server_key.split("///"). join(", ") %></h1>

  <div class="card">
    <div class="card-content">
      <h2 class="subtitle">CPU</h2>
      <div id="cpu_report_<%= server_key.parameterize %>" class="chart"></div>
      <p class="content is-small">CPU usage %, average per 1 minute</p>
    </div>
  </div>

  <br/>

  <div class="card">
    <div class="card-content">
      <h2 class="subtitle">Memory</h2>
      <div id="memory_report_<%= server_key.parameterize %>" class="chart"></div>
      <p class="content is-small">App memory usage</p>
    </div>
  </div>

  <br/>

  <div class="card">
    <div class="card-content">
      <h2 class="subtitle">Storage</h2>
      <div id="disk_report_<%= server_key.parameterize %>" class="chart"></div>
      <p class="content is-small">Available storage size (local disk size)</p>
    </div>
  </div>

  <br>
<% end %>

<% content_for :on_load do %>
  <script>
    <% @resources_report.data.keys.each do |server_key| %>
      var data1 = <%= raw @resources_report.cpu[server_key].to_json %>;
      showPercentageChart('cpu_report_<%= server_key.parameterize %>', data1, 'CPU');

      var data2 = <%= raw @resources_report.memory[server_key].to_json %>;
      showUsageChart('memory_report_<%= server_key.parameterize %>', data2, 'Usage', 2);

      var data3 = <%= raw @resources_report.disk[server_key].to_json %>;
      showUsageChart('disk_report_<%= server_key.parameterize %>', data3, 'Available', 3);
    <% end %>
  </script>
<% end %>
